<template>
  <div style="height: 100%">
    <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}" style="height:100%">
      <x-header title="slot:overwrite-title" :left-options="{backText:'',preventGoBack:true}" @on-click-back="backhome">
        <div slot="overwrite-title" class="topic">
          <template v-for="(item, i) in message_titles">
            <div class="title" @click="getMessage(i)" :class="{active: messageIndex == i}" :key="i">
              <span>{{item}}</span>
              <div class="underline1" v-if="messageIndex == i"></div>
            </div>
          </template>
        </div>
      </x-header>
      <div v-show="count">
        <div class="prjName">{{obj.PROJECTNAME}}</div>
        <div class="sup"></div>
        <div class="part">
          <div class="title_bar">
            <img src="@/assets/img/title_icon.png" class="title_icon" />
            <div class="title_name">项目进度</div>
          </div>
          <div id="progress">
          </div>
        </div>
        <div class="sup"></div>
        <div class="part">
          <div class="title_bar">
            <img src="@/assets/img/title_icon.png" class="title_icon" />
            <div class="title_name">安全隐患</div>
            <div class="title_btn_div">
              <div class="title_btn active" id="dangerType" @click="getTypeOfDanger">类别</div>
              <div class="title_btn" id="dangerRectify" @click="getRectifyOfDanger">整改</div>
            </div>
          </div>
          <div id="danger" style="width: 100%;height: 275px;"></div>
          <nut-scroller style="display:-webkit-box">
            <div slot="list" class="typeofDanger" v-for="(item, index) of dangerList" :key="index" v-show="!changeType">
              <div class="icon_name">
                <img :src="getImgUrl(index)" class="icon" />
                <div class="fatherclass">{{item.FATHERCLASS}}</div>
              </div>
              <div class="data">{{item.TOTAL}}</div>
            </div>
            <div slot="list" class="typeofDanger" v-show="other > 0 && !changeType">
              <div class="icon_name">
                <img src="@/assets/img/blue.png" class="icon" />
                <div style="margin-left:5%">其他</div>
              </div>
              <div>{{other}}</div>
            </div>
          </nut-scroller>
          <nut-scroller style="display:-webkit-box" v-show="changeType">
            <div slot="list" class="typeofDanger">
              <div class="icon_name">
                <img src="@/assets/img/icon_0.png" class="icon" />
                <div class="fatherclass">已整改</div>
              </div>
              <div>{{rectifyed}}</div>
            </div>
            <div slot="list" class="typeofDanger">
              <div class="icon_name">
                <img src="@/assets/img/icon_1.png" class="icon" />
                <div class="fatherclass">整改不合格</div>
              </div>
              <div>{{norectify}}</div>
            </div>
            <div slot="list" class="typeofDanger">
              <div class="icon_name">
                <img src="@/assets/img/icon_2.png" class="icon" />
                <div class="fatherclass">未整改</div>
              </div>
              <div>{{unrectify}}</div>
            </div>
          </nut-scroller>
        </div>
        <div class="sup"></div>
        <div class="part">
          <div class="title_bar">
            <img src="@/assets/img/title_icon.png" class="title_icon" />
            <div class="title_name">质量缺陷</div>
            <div class="title_btn_div">
              <div class="title_btn active" id="qualityType" @click="getTypeOfQuality">类别</div>
              <div class="title_btn" id="qualityRectify" @click="getRectifyOfQuality">整改</div>
            </div>
          </div>
          <div id="quality" style="width: 100%;height: 275px;"></div>
          <nut-scroller style="display:-webkit-box">
            <div slot="list" class="typeofDanger" v-for="(item, index) of qualityList" :key="index"
              v-show="!changeQualityType">
              <div class="icon_name">
                <img :src="getImgUrl(index)" class="icon" />
                <div class="fatherclass">{{item.CHECKTYPE}}</div>
              </div>
              <div class="data">{{item.TOTAL}}</div>
            </div>
            <div slot="list" class="typeofDanger" v-show="qualityOther > 0 && !changeQualityType">
              <div class="icon_name">
                <img src="@/assets/img/blue.png" class="icon" />
                <div style="margin-left:5%">其他</div>
              </div>
              <div>{{qualityOther}}</div>
            </div>
          </nut-scroller>
          <nut-scroller style="display:-webkit-box" v-show="changeQualityType">
            <div slot="list" class="typeofDanger">
              <div class="icon_name">
                <img src="@/assets/img/icon_0.png" class="icon" />
                <div class="fatherclass">已整改</div>
              </div>
              <div>{{qualityRecticy}}</div>
            </div>
            <div slot="list" class="typeofDanger">
              <div class="icon_name">
                <img src="@/assets/img/icon_2.png" class="icon" />
                <div class="fatherclass">未整改</div>
              </div>
              <div>{{qualityUnrectify}}</div>
            </div>
          </nut-scroller>
        </div>
        <div class="sup"></div>
        <div class="part">
          <div class="title_bar">
            <img src="@/assets/img/title_icon.png" class="title_icon" />
            <div class="title_name">质量验收</div>
          </div>
          <div>
            <div class="qwer">
              <div class="qwer_name left">验收类型</div>
              <div class="qwer_name center">总数</div>
              <div class="qwer_name right">已验收</div>
            </div>
            <div class="qwer">
              <div class="qwer_name1 left">分项</div>
              <div class="qwer_data center">{{section}}</div>
              <div class="qwer_data right">{{doneSection}}</div>
            </div>
            <div class="qwer">
              <div class="qwer_name1 left">子分部</div>
              <div class="qwer_data center">{{sonSubpro}}</div>
              <div class="qwer_data right">{{doneSonsub}}</div>
            </div>
            <div class="qwer">
              <div class="qwer_name1 left">分部</div>
              <div class="qwer_data center">{{subPro}}</div>
              <div class="qwer_data right">{{doneSub}}</div>
            </div>
            <div class="qwer">
              <div class="qwer_name1 left">子单位</div>
              <div class="qwer_data center">{{sonUint}}</div>
              <div class="qwer_data right">{{doneSonUnit}}</div>
            </div>
            <div class="qwer">
              <div class="qwer_name1 left">单位工程</div>
              <div class="qwer_data center">{{unit}}</div>
              <div class="qwer_data right">{{doneUnit}}</div>
            </div>
          </div>
        </div>
        <div class="sup"></div>
        <div class="part">
          <div class="title_bar">
            <img src="@/assets/img/title_icon.png" class="title_icon" />
            <div class="title_name">档案统计</div>
          </div>
          <div>
            <div class="material">
              <img src="@/assets/img/total.png" class="num_icon" />
              <div class="material_name">资料总数</div>
              <div class="material_data">{{dataCount}}</div>
            </div>
            <div class="material">
              <img src="@/assets/img/donenum.png" class="num_icon" />
              <div class="material_name">已组卷资料数</div>
              <div class="material_data">{{dataInDossierNum}}</div>
            </div>
            <div class="material">
              <img src="@/assets/img/num.png" class="num_icon" />
              <div class="material_name">卷数</div>
              <div class="material_data">{{dossierCount}}</div>
            </div>
            <div class="material">
              <img src="@/assets/img/unnum.png" class="num_icon" />
              <div class="material_name">未组卷资料数</div>
              <div class="material_data">{{dataNotInDossierNum}}</div>
            </div>
          </div>
        </div>
        <router-view style="height:100%;"></router-view>
      </div>
      <!-- 模型浏览 -->
      <div v-show="modelShow" class="model">
        <div v-if="modelList.length<1">
          <divider> 无上传模型</divider>
        </div>
        <div v-else v-for="(item, index) in modelList" @click="openInfo(item)" :key="index" class='modelList'>
          <div>{{item.MODELNAME}}</div>
          <div>{{item.MODELVERSION}}</div>
        </div>
      </div>
      <!-- 基本信息 -->
      <div v-show="basic">
        <DIV>
          <photo-upload title="" :pageToken="pageToken" :fieldToken="fieldToken" :imgWidth="imgWidth"
            v-model="attachment" :readonly="true"></photo-upload>
        </DIV>
        <h2 style="margin-left:15px">{{title}}</h2>
        <group>
          <cell title="立项编号" v-model="projectNo" class="info"></cell>
          <cell title="项目类型" v-model="prjtype" class="info"></cell>
          <cell title="项目总投资" v-model="contractsum" class="info"></cell>
          <cell title="项目建设周期" v-model="period" class="info"></cell>
          <cell title="项目标段" v-model="prjbdst" class="info"></cell>
          <cell title="项目负责人" v-model="prjmanagefullname" class="info"></cell>
          <cell title="建设性质" v-model="category" class="info"></cell>
        </group>
        <div class="introduce">项目简介</div>
        <div class="introduce" style="color:#999999">{{introduce}}</div>
        <router-view style="height:100%;"></router-view>
      </div>
    </v-touch>
  </div>
</template>

<script>
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入饼图组件
  require('echarts/lib/chart/pie')
  require('echarts/lib/chart/bar')
  // 引入提示框和图例组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/legend')
  require('echarts/lib/component/graphic')
  import {
    Scroller
  } from '@nutui/nutui'
  import Vue from 'vue'
  import $ from "jquery"
  import {
    FormPreview
  } from 'vux'
  import {
    Cell,
    Group,
    XProgress,
    Box,
    Divider,
    cookie
  } from 'vux'
  Scroller.install(Vue)
  var $vue = {}
  export default {
    name: "projectInfo",
    data() {
      return {
        messageIndex: 0,
        message_titles: [
          '统计信息',
          '模型浏览',
          '基本信息'
        ],
        obj: [],
        count: true, //统计信息标识
        basic: false, //基本信息标识
        modelShow: false, //模型统计标识
        basicInfo: [],
        title: "",
        projectNo: "",
        prjtype: "",
        contractsum: "",
        prjbdst: "",
        prjmanagefullname: "",
        category: "",
        period: "",
        introduce: "",
        pageToken: "",
        fieldToken: "",
        attachment: "",
        progressList: [], //前期设计
        progressList1: [], //报批报建
        progressList2: [], //招标工作
        progressList3: [], //合同签订
        progressList4: [], //施工
        progressList5: [], //验收
        progressList6: [], //结算
        percent: 0, //前期设计百分比
        percent1: 0, //报批报建百分比
        percent2: 0, //招标工作百分比
        percent3: 0, //合同签订百分比
        percent4: 0, //施工百分比
        percent5: 0, //验收百分比
        percent6: 0, //结算百分比
        dangerList: [],
        other: 0, //其他隐患数
        changeType: false,
        rectifyed: 0, //已整改隐患数
        norectify: 0, //整改不合格隐患数
        unrectify: 0, //未整改隐患数
        qualityList: [],
        qualityOther: 0, //其他质量缺陷数
        qualityRecticy: 0,
        qualityUnrectify: 0,
        changeQualityType: false,
        inspectionList: [],
        doneInspecList: [],
        docList: [],
        section: 0, //分项总数
        doneSection: 0, //分项已验收
        sonSubpro: 0, //子分部总数
        doneSonsub: 0, //子分部已验收
        subPro: 0, //分部总数
        doneSub: 0, //分部已验收
        sonUint: 0, //子单位总数
        doneSonUnit: 0, //子单位已验收
        unit: 0, //单位工程总数
        doneUnit: 0, //单位工程已验收
        dataCount: 0, //资料总数
        dataInDossierNum: 0, //已组卷资料数
        dossierCount: 0, //卷数
        dataNotInDossierNum: 0, //未组卷资料数
        imgWidth: "100%",
        page: 1,
        modelList: [],
        color1: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#8C84FF'
          }, {
            offset: 1,
            color: '#4F88FD'
          }],
        },
        color2: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#73D1DC'
          }, {
            offset: 1,
            color: '#85D8A3'
          }],
        },
        color3: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#FF7794'
          }, {
            offset: 1,
            color: '#FFA0D0'
          }],
        },
        color4: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#5bcfe4'
          }, {
            offset: 1,
            color: '#89e7ff'
          }],
        }

      }
    },
    beforeCreate() {
      $vue = this
    },
    mounted() {
      this.obj = this.$route.params.item;
      this.pageToken = this.guid();
      this.fieldToken = this.guid();
      //this.drawDanger();
      setTimeout(() => {
        this.getCountInfo();
      }, 500)

    },
    methods: {
      backhome() {
        this.$router.push({
          path: 'projectList',
          name: 'projectList',
        })
      },
      //打开模型
      openInfo(item) {
        // console.log(this.$store.state.user)
        //以下为bimviz下的模型浏览
        // this.$router.push({
        //   path : '/bimInfo',
        //   name : 'bimInfo',
        //   params :{
        //     item : item,
        //     obj : this.obj
        //   }
        // })
        //参数中有userinfo和权限信息的则有日常巡检功能
        //SuperMap.openScene("http://gisct.ecidi.com:8001/iserver/services/3D-cddt_test/rest/realspace","test",this.$store.state.user,this.$store.state.dailyArr,document.cookie);
        SuperMap.openScene(item.MODELURL, item.SCENCENAME, "", "", document.cookie);
      },
      onSwipeRight() {
        this.$router.go(-1)
      },
      //根据类别获取质量统计
      getTypeOfQuality() {
        this.changeQualityType = false
        $("#qualityType").addClass("active")
        $("#qualityRectify").removeClass("active")
        this.getQualityInfo()
      },
      //根据整改情况获取质量统计
      getRectifyOfQuality() {
        this.changeQualityType = true
        $("#qualityType").removeClass("active")
        $("#qualityRectify").addClass("active")
        this.getQualityInfo()
      },
      //根据类别获取安全统计
      getTypeOfDanger() {
        this.changeType = false;
        $("#dangerType").addClass("active")
        $("#dangerRectify").removeClass("active")
        this.getDangerInfo();
      },
      //根据整改情况获取安全统计
      getRectifyOfDanger() {
        this.changeType = true;
        $("#dangerType").removeClass("active")
        $("#dangerRectify").addClass("active")
        this.getDangerInfo();
      },

      getImgUrl(index) {
        return require("@/assets/img/icon_" + index + ".png");
      },
      //获取统计信息
      getCountInfo() {
        //项目进度信息
        this.getProgressInfo()
        //安全统计
        this.getDangerInfo()
        //质量统计
        this.getQualityInfo()
        //质量验收
        this.getInspectionInfo()
        //档案统计
        this.getDocdata()
      },
      getProgressInfo() {
        var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getProjectInfo","proId":"' + this.obj.PROJECTID + '"}'
        this.$ajax({
          url: this.COMMON_URL,
          method: 'post',
          // data : this.signMD5({
          //   FixJSON :params
          // })
          data: {
            FixJSON: params
          }
        }).then(res => {
          var cmp = res.data.comp;
          var doing = res.data.doing;
          var delay = res.data.delay;
          var nosta = res.data.nosta;
          var type = ["结算送审", "竣工验收", "施工", "合同签订", "招标工作", "报批报建", "前期设计"];
          var dataCmp = this.summary(type, cmp);
          var dataDoing = this.summary(type, doing);
          var dataDelay = this.summary(type, delay);
          var dataNosta = this.summary(type, nosta);
          var sum = this.sumfour(dataCmp, dataDoing, dataDelay, dataNosta);
          var l = sum.length;
          var max = 0;
          //取最大值
          for (var i = 0; i < l; i++) {
            if (i == 0) {
              max = sum[0];
            } else if (max < sum[i]) {
              max = sum[i];
            }
          }
          this.getProjectInfo(type, dataCmp, dataDoing, dataDelay, dataNosta, sum, max);
        })
      },
      getProjectInfo(type, cmp, doing, delay, nosta, sum, max) {
        var temp = [];
        var temp1 = [];
        var temp2 = [];
        for (var i = 0; i < 7; i++) {
          if (nosta[i] == 0) {
            temp[i] = 0;
          } else {
            temp[i] = cmp[i] + doing[i] + delay[i] + nosta[i];
          }
          if (delay[i] == 0) {
            temp1[i] = 0;
          } else {
            temp1[i] = cmp[i] + doing[i] + delay[i];
          }
          if (doing[i] == 0) {
            temp2[i] = 0;
          } else {
            temp2[i] = cmp[i] + doing[i];
          }
        }
        var theme = {
          "color": [
            "#CD5C5C",
            "#1E90FF",
            "#9370DB",
            "#20B2AA",
            "#FFA500"
          ],
        }
        var danger = echarts.init(document.getElementById('progress'), theme);
        var dangerOption = {
          legend: {
            data: ['延期', '已完成', '进行中', '待开展'],
            itemWidth: 15,
            x: '120',
            y: '10'
          },
          grid: {
            left: '-10%',
            right: '4%',
            bottom: '-6%',
            containLabel: true,
            y: '40'
          },
          xAxis: {
            type: 'value',
            show: false,
            max: max + 1
          },
          yAxis: {
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              lineStyle: {
                width: 0
              }
            },
            axisLabel: {
              margin: 0,
              textStyle: {
                align: 'left',
                fontSize: '9',
                color: '#B5BAC3',
                padding: [-17, 0, 0, 2],
              },
              formatter: function (value) {
                return value + "\n";
              }
            },
            data: type,
            show: true
          },
          tooltip: {},
          series: [{
              name: '已完成',
              type: 'bar',
              barGap: '-100%',
              //stack: '总量',
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [{
                    offset: 0,
                    color: '#7DCAE4'
                  },
                  {
                    offset: 1,
                    color: '#89D999'
                  }
                ]
              ),
              label: {
                show: false,
                position: 'top'
              },
              itemStyle: {
                normal: {
                  borderColor: '#fff',
                  borderWidth: 4,
                  barBorderRadius: [0, 7, 7, 0]
                }
              },
              data: cmp,
              barWidth: 15,
              z: 6,
              tooltip: {
                formatter: function (params) {
                  if (params.data != 0) {
                    var marker =
                      "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#7DCAE4;'></span>"
                    var tip = marker + params.name + "<br>" + params.seriesName + ":" + params.value + "<br>";
                    return tip;
                  } else {
                    return "";
                  }
                }
              }
            },
            {
              name: '进行中',
              type: 'bar',
              barGap: '-100%',
              //stack: '总量',
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [{
                    offset: 0,
                    color: '#57B7E0'
                  },
                  {
                    offset: 1,
                    color: '#7DDFFC'
                  }
                ]
              ),
              label: {
                show: false,
                position: 'insideRight'
              },
              itemStyle: {
                normal: {
                  borderColor: '#fff',
                  borderWidth: 4,
                  barBorderRadius: [0, 7, 7, 0]
                }
              },
              data: temp2,
              barWidth: 15,
              z: 5,
              tooltip: {
                formatter: function (params) {
                  if (params.data != 0) {
                    var marker =
                      "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#57B7E0;'></span>";
                    var value = params.data - cmp[params.dataIndex]
                    var tip = marker + params.name + "<br>" + params.seriesName + ":" + value + "<br>";
                    return tip;
                  } else {
                    return "";
                  }
                }
              }
            },
            {
              name: '延期',
              type: 'bar',
              barGap: '-100%',
              //stack: '总量',
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [{
                    offset: 0,
                    color: '#FF6E02'
                  },
                  {
                    offset: 0,
                    color: '#FF99A2'
                  },
                  {
                    offset: 1,
                    color: '#FD7884'
                  }
                ]
              ),
              label: {
                show: false,
                position: 'insideRight'
              },
              itemStyle: {
                normal: {
                  borderColor: '#fff',
                  borderWidth: 4,
                  barBorderRadius: [0, 7, 7, 0]
                }
              },
              data: temp1,
              barWidth: 15,
              z: 4,
              tooltip: {
                formatter: function (params) {
                  if (params.data != 0) {
                    var marker =
                      "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#FD7884;'></span>";
                    var value = params.data - cmp[params.dataIndex] - doing[params.dataIndex];
                    var tip = marker + params.name + "<br>" + params.seriesName + ":" + value + "<br>";
                    return tip;
                  } else {
                    return "";
                  }
                }
              }
            },
            {
              name: '待开展',
              type: 'bar',
              barGap: '-100%',
              //stack: '总量',
              color: new echarts.graphic.LinearGradient(
                0, 0, 1, 0,
                [{
                    offset: 0,
                    color: '#DADADA'
                  },
                  {
                    offset: 1,
                    color: '#DADADA'
                  }
                ]
              ),
              label: {
                show: false,
                position: 'insideRight'
              },
              itemStyle: {
                normal: {
                  borderColor: '#fff',
                  borderWidth: 4,
                  barBorderRadius: [0, 7, 7, 0]
                }
              },
              data: temp,
              barWidth: 15,
              z: 3,
              tooltip: {
                formatter: function (params) {
                  if (params.data != 0) {
                    var marker =
                      "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#DADADA;'></span>";
                    var value = params.data - cmp[params.dataIndex] - doing[params.dataIndex] - delay[params
                      .dataIndex];
                    var tip = marker + params.name + "<br>" + params.seriesName + ":" + value + "<br>";
                    return tip;
                  } else {
                    return "";
                  }
                }
              }
            },
            {
              name: '合计',
              type: 'bar',
              //stack: '总量',
              color: '#fff',
              backgroundStyle: {
                opacity: 0
              },
              label: {
                textStyle: {
                  fontStyle: 'DIN-Medium',
                  color: '#354777'
                },
                show: true,
                position: 'right',
                color: 'black'
              },
              data: sum,
              barWidth: 15
            }
          ]
        }
        danger.setOption(dangerOption);
      },
      //归纳节点类型
      summary(l, n) {
        var a = l.length;
        var b = n.length;
        var res = [];
        for (var i = 0; i < a; i++) {
          var sum = 0;
          for (var j = 0; j < b; j++) {
            if (n[j].PREVWORKTYPE == l[i]) {
              sum = sum + 1;
            }
          }
          res.push(sum);
        }
        return res;
      },

      //计算节点总数
      sumfour(a, b, c, d) {
        var l = a.length;
        var s = 0;
        var res = [];
        for (var i = 0; i < l; i++) {
          s = a[i] + b[i] + c[i] + d[i];
          res.push(s);
        }
        return res;
      },
      getDangerInfo() {
        //console.log(this.obj)
        var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getCountByStateAndProId","sysprjid":"' + this.obj.PROJECTID +
          '"}'
        this.$ajax({
          url: this.COMMON_URL,
          method: 'post',
          // data : this.signMD5({
          //   FixJSON : params
          // })
          data: {
            FixJSON: params
          }
        }).then(res => {
          //console.log(res)
          this.dangerList = res.data.dataTopThree
          this.rectifyed = res.data.data[0].RECTIFYED
          this.norectify = res.data.data[0].NORECTIFY
          this.unrectify = res.data.data[0].UNRECTIFYED
          if (!this.changeType) {
            this.drawDanger(res.data.dataAll, res.data.dataThree, res.data.dataTopThree)
          } else {
            this.drawDangerByRectify(this.rectifyed, this.norectify, this.unrectify)
          }

        })
      },
      drawDangerByRectify(rectify, norectify, unrectify) {
        var all = parseInt(rectify) + parseInt(norectify) + parseInt(unrectify)
        let myChart = echarts.init(document.getElementById('danger'))
        //console.log(myChart)
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{b}:{c} ({d}%)"
          },
          legend: {
            show: false,
            orient: 'horizontal',
            bottom: '10'
          },
          calculable: true,
          graphic: [{
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '23%',
              bottom: '16px',
              style: {
                fill: '#666666',
                text: "共计",
                font: '14px Microsoft YaHei'
              }
            },
            {
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '34%',
              style: {
                fill: '#191919',
                text: all,
                font: '36px AvantGardeITCbyBT-Bookfont,"Microsoft YaHei"'
              }
            }
          ],
          series: [{
            center: ['50%', '35%'],
            type: 'pie',
            radius: ['50%', '60%'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [{
                value: rectify,
                name: "已整改"
              },
              {
                value: norectify,
                name: "整改不合格"
              },
              {
                value: unrectify,
                name: "未整改"
              }
            ],
            // color:['#addd52','#2095df','#FFAD14']
            color: [$vue.color1, $vue.color2, $vue.color3]
          }]
        })
      },
      drawDanger(all, three, topThree) {
        // 基于准备好的dom，初始化echarts实例
        var length = topThree.length
        this.other = all[0].TOTALALL - three[0].TOTALTHREE
        console.log("other", this.other)
        var tempOther = this.other
        var fatherClass = []
        var total = []
        for (var i = 0; i < length; i++) {
          fatherClass.push(topThree[i].FATHERCLASS);
          total.push(topThree[i].TOTAL);
        }
        console.log("fatherclass", fatherClass)
        let myChart = echarts.init(document.getElementById('danger'))
        //console.log(myChart)
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{b}:{c} ({d}%)"
          },
          legend: {
            show: false,
            orient: 'horizontal',
            bottom: '10'
          },
          calculable: true,
          graphic: [{
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '23%',
              bottom: '16px',
              style: {
                fill: '#666666',
                text: "共计",
                font: '14px Microsoft YaHei'
              }
            },
            {
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '34%',
              style: {
                fill: '#191919',
                text: all[0].TOTALALL,
                font: '36px AvantGardeITCbyBT-Bookfont,"Microsoft YaHei"'
              }
            }
          ],
          series: [{
            center: ['50%', '35%'],
            type: 'pie',
            radius: ['50%', '60%'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: (function () {
              var data = [];
              for (var j = 0; j < length; j++) {
                data.push({
                  "value": total[j],
                  "name": fatherClass[j]
                });
              }
              if (tempOther > 0) {
                data.push({
                  "value": tempOther,
                  "name": "其他"
                });
              }
              return data;
            })(),
            // color:['#addd52','#2095df','#FFAD14','#FF7E47']
            color: [$vue.color1, $vue.color2, $vue.color3, $vue.color4]
          }]
        })
      },
      getQualityInfo() {
        var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getProQualityInfo","sysprjid":"' + this.obj.PROJECTID + '"}'
        this.$ajax({
          url: this.COMMON_URL,
          method: 'post',
          // data : this.signMD5({
          //   FixJSON : params
          // })
          data: {
            FixJSON: params
          }
        }).then(res => {
          //console.log(res)
          this.qualityList = res.data.dataTopThree
          this.qualityRecticy = res.data.data[0].RECTIFYED
          this.qualityUnrectify = res.data.data[0].UNRECTIFYED
          if (!this.changeQualityType) {
            this.drawQuality(res.data.dataAll, res.data.dataThree, res.data.dataTopThree)
          } else {
            this.drawQualityByRectify(this.qualityRecticy, this.qualityUnrectify)
          }
        })
      },
      drawQualityByRectify(qualityRecticy, qualityUnrectify) {
        var all = parseInt(qualityRecticy) + parseInt(qualityUnrectify)
        let myChart = echarts.init(document.getElementById('quality'))
        //console.log(myChart)
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{b}:{c} ({d}%)"
          },
          legend: {
            show: false,
            orient: 'horizontal',
            bottom: '10'
          },
          calculable: true,
          graphic: [{
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '23%',
              bottom: '16px',
              style: {
                fill: '#666666',
                text: "共计",
                font: '14px Microsoft YaHei'
              }
            },
            {
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '34%',
              style: {
                fill: '#191919',
                text: all,
                font: '36px AvantGardeITCbyBT-Bookfont,"Microsoft YaHei"'
              }
            }
          ],
          series: [{
            center: ['50%', '35%'],
            type: 'pie',
            radius: ['50%', '60%'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: [{
                value: qualityRecticy,
                name: "已整改"
              },
              {
                value: qualityUnrectify,
                name: "未整改"
              }
            ],
            // color:['#addd52','#FFAD14']
            color: [$vue.color1, $vue.color3]
          }]
        })
      },
      drawQuality(all, three, topThree) {
        // 基于准备好的dom，初始化echarts实例
        var length = topThree.length
        this.qualityOther = all[0].TOTALALL - three[0].TOTALTHREE
        var tempOther = this.qualityOther
        var fatherClass = []
        var total = []
        for (var i = 0; i < length; i++) {
          fatherClass.push(topThree[i].CHECKTYPE);
          total.push(topThree[i].TOTAL);
        }
        let myChart = echarts.init(document.getElementById('quality'))
        //console.log(myChart)
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{b}:{c} ({d}%)"
          },
          legend: {
            show: false,
            orient: 'horizontal',
            bottom: '10'
          },
          calculable: true,
          graphic: [{
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '23%',
              bottom: '16px',
              style: {
                fill: '#666666',
                text: "共计",
                font: '14px Microsoft YaHei'
              }
            },
            {
              type: 'text',
              left: 'center', // 相对父元素居中
              top: '34%',
              style: {
                fill: '#191919',
                text: all[0].TOTALALL,
                font: '36px AvantGardeITCbyBT-Bookfont,"Microsoft YaHei"'
              }
            }
          ],
          series: [{
            center: ['50%', '35%'],
            type: 'pie',
            radius: ['50%', '60%'],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            data: (function () {
              var data = [];
              for (var j = 0; j < length; j++) {
                data.push({
                  "value": total[j],
                  "name": fatherClass[j]
                });
              }
              if (tempOther > 0) {
                data.push({
                  "value": tempOther,
                  "name": "其他"
                });
              }
              return data;
            })(),
            // color:['#addd52','#2095df','#FFAD14','#FF7E47']
            color: [this.color1, this.color2, this.color3, this.color4]
          }]
        })
      },
      getInspectionInfo() {
        //console.log(this.obj)
        var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getProInspectionInfo","sysprjid":"' + this.obj.PROJECTID +
          '"}'

        this.$ajax({
          url: this.COMMON_URL,
          method: 'post',
          // data :this.signMD5({
          //   FixJSON : params
          // })
          data: {
            FixJSON: params
          }
        }).then(res => {
          //console.log(res)
          this.inspectionList = res.data.data
          this.doneInspecList = res.data.doneData
          this.section = this.inspectionList[0].SECTION
          this.doneSection = this.doneInspecList[0].DONESECTION
          this.sonSubpro = this.inspectionList[0].SONSUBPRO
          this.doneSonsub = this.doneInspecList[0].DONESONSUB
          this.subPro = this.inspectionList[0].SUBPROJECT
          this.doneSub = this.doneInspecList[0].DONESUB
          this.sonUint = this.inspectionList[0].SONUINTPRO
          this.doneSonUnit = this.doneInspecList[0].DONESONUNIT
          this.unit = this.inspectionList[0].UNITPROJECT
          this.doneUnit = this.doneInspecList[0].DONEUNIT
        })
      },
      getDocdata() {
        var params = '{"_method":"HOME_FIX_PERMISSION_MENU.getDocdata","SYSPRJID":"' + this.obj.PROJECTID + '"}'
        this.$ajax({
          url: this.COMMON_URL,
          method: 'post',
          // data : this.signMD5({
          //   FixJSON : params
          // })
          data: {
            FixJSON: params
          }
        }).then(res => {
          console.log(res)
          this.docList = res.data.docDataObj.map
          this.dataCount = this.docList.dataCount
          this.dataInDossierNum = this.docList.dataInDossierNum
          this.dossierCount = this.docList.dossierCount
          this.dataNotInDossierNum = this.docList.dataNotInDossierNum
        })
      },
      getMessage(i) {
        this.messageIndex = i
        var params = ''
        if (i == 0) {
          this.count = true;
          this.basic = false;
          this.modelShow = false;
          this.getCountInfo();
        }
        if (i == 1) {
          this.count = false;
          this.basic = false;
          this.modelShow = true; //打包暂时不用展示
          params =
            '{"_method":"component.getListData","_param":{"bizObj":"BIM_MODEL","service":"selectMore","fields":"*",' +
            '"filter":"STATE<>\'废弃\' and SYSPRJID= \'' + this.obj.PROJECTID +
            '\',"currentPageIndex":' + this.page + ',"pageSize":50,"orderList":[],"QueryFormData":""}}';
          var params1 = {
            FixJSON: JSON.stringify({
              _method: "component.getListData",
              _param: {
                bizObj: "BIM_MODEL",
                service: "selectMore",
                fields: "*",
                filter: "STATE<>'废弃' and SYSPRJID= '" + this.obj.PROJECTID + "'",
                currentPageIndex: '1',
                pageSize: "99",
                orderList: [],
                QueryFormData: ""
              }
            })
          }
          this.$ajax({
            method: 'post',
            url: this.COMMON_URL,
            // data: this.signMD5({
            //   FixJSON: params
            // })
            data: params1
          }).then((res) => {
            console.log("模型", res);
            this.modelList = res.data.datas;
          })
        }
        if (i == 2) {
          this.count = false;
          this.basic = true;
          this.modelShow = false;
          params =
            '{"_method":"formService.getFormData","requestEventData":{"eventType":"formInitEvent","formType":1,"bizObjId":"SYS_PROJECTINFO","formId":"PMPRO_SYS_PROJECTINFO_add_new"},"useType":"view","getData":{"useType":"view","objName":"SYS_PROJECTINFO","relatedObj":["SYS_PROJECTINFO"],"pk":[{"key":"PROJECTID","value":"' +
            this.obj.PROJECTID +
            '"}]},"getSysVar":{"CREATEUSERFULLNAME":"{sysLoginUser.userName}","CREATEUSERNAME":"{sysLoginUser.loginId}","CREATEDATE":"{sysDate.Now}"},"getFormVerify":{"objName":"SYS_PROJECTINFO","viewId":"PMPRO_SYS_PROJECTINFO_add_new"},"getToolbar":{"useType":"view","objName":"SYS_PROJECTINFO","viewId":"PMPRO_SYS_PROJECTINFO_add_new"}}'
          this.$ajax({
            url: this.COMMON_URL + '?_isBreak=false&objName=SYS_PROJECTINFO&_useType=view&_pk=PROJECTID&_pkValue=' +
              this.obj.PROJECTID + '&_treeNodeId=&_treeNodeName=undefined',
            method: 'post',
            data: {
              FixJSON: params
            }
          }).then(res => {
            console.log(res)
            this.basicInfo = res.data.getData.SYS_PROJECTINFO[0]
            this.title = this.basicInfo.PROJECTNAME.val
            this.projectNo = this.basicInfo.PROJECTNO.val
            this.prjtype = this.basicInfo.PRJTYPE.val
            this.contractsum = this.basicInfo.CONTRACTSUM.val + "万元"
            this.prjbdst = this.basicInfo.PRJBDST.val
            this.prjmanagefullname = this.basicInfo.PRJMANAGERFULLNAME.val
            this.category = this.basicInfo.PRJCATEGORY.val
            this.introduce = this.basicInfo.TARGET.val
            var starttime = this.basicInfo.STARTDATE.val.substring(0, 10)
            var finishtime = this.basicInfo.FINISHDATE.val.substring(0, 10)
            this.period = starttime + "~" + finishtime
            this.attachment = this.basicInfo.ATTACHMENT2.val
            console.log(this.basicInfo)
          })
        }
      }
    },

    components: {
      Cell,
      Group,
      FormPreview,
      XProgress,
      Box,
      Scroller,
      Divider
    }
  }

</script>

<style scoped>
  .model {
    height: 100%;
    width: 100%;
    background-color: #f5f5f5;
    padding-top: 3px
  }

  .prjName {
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: rgba(25, 25, 25, 1);
    line-height: 20px;
    margin: 15px;
  }

  .sup {
    width: 100%;
    height: 10px;
    border-radius: 0;
    background-color: #F5F5F5;
  }

  .part {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .title_bar {
    display: flex;
  }

  .title_icon {
    width: 24px;
    height: 24px;
    margin-left: 15px;
  }

  .title_name {
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    color: #262A34;
    line-height: 24px;
    margin-left: 10px;
  }

  .title_btn_div {
    margin-left: auto;
    margin-right: 5%;
    display: flex;
  }

  .title_btn {
    width: 53px;
    height: 25px;
    background: rgba(245, 245, 245, 1);
    border-radius: 4px;
    color: #999999;
    text-align: center;
    margin-left: 10px;
  }

  .title_btn_div .active {

    background: #5D8BFF;
    color: #FFFFFF
  }

  #progress {
    width: 100%;
    height: 300px;
  }

  .task {
    display: flex;
    margin-left: 15px;
    margin-top: 10px;
  }

  .rectangle {
    width: 70%;
    height: 25px;
    border-radius: 0;
    background-color: #F5F5F5;
    margin-left: auto;
    margin-right: 5%;
  }

  .charts {
    height: 25px;
    background-color: #58ca5b;
    border-radius: 0;
  }

  .qwer {
    display: flex;
    margin: 20px 15px;
  }

  .qwer_name {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #999999;
    line-height: 24px;
  }

  .left {
    flex: 0 1 45%;
  }

  .center {
    flex: 0 1 40%;
  }

  .right {
    flex: 0 1 15%;
    text-align: center
  }

  .qwer_name1 {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #191919;
    line-height: 24px;
  }

  .qwer_data center {
    margin-left: 2%;
  }

  .qwer_data {
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 600;
    color: #191919;
    line-height: 24px;
  }

  .num_icon {
    width: 18px;
    height: 18px;
  }

  .material {
    display: flex;
    background: #F5F5F5;
    width: 85%;
    margin: 15px;
    align-items: center;
    padding: 10px;
  }

  .material_name {
    margin-left: 10px;
  }

  .material_data {
    margin-left: auto;
    margin-right: 5%;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 600;
    color: #191919;
    line-height: 24px;
  }

  span {
    font-size: 18px;
    font-family: PingFangSC-Semibold;
    font-weight: 600;
    line-height: 20px;
  }

  .title {
    box-sizing: border-box;
    font-size: 16px;
    color: #ACACAC;
    font-weight: bold;
    margin-left: auto;
    height: 30px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    text-align: -webkit-center;
    align-items: center;
  }

  .underline1 {
    width: 16px;
    height: 3px;
    background: #4D86FF;
    border-radius: 4px;
    margin-top: 7%;
  }

  .topic {
    display: flex;
    width: 70%;
    margin: auto;
    color: #cccccc;
  }

  .topic .active {
    color: #4D86FF
  }

  .info {
    padding: 15px;
  }

  .introduce {
    position: relative;
    left: 15px;
    margin-top: 10px;
    margin-right: 10px;
  }

  .basic {
    display: none;
  }

  .typeofDanger {
    background-color: #F5F5F5;
    width: 200px;
    margin-left: 5%;
    height: 50px;
    text-align: center;
  }

  .icon {
    width: 15px;
    height: 15px;
  }

  .icon_name {
    display: flex;
    justify-content: center;
    margin-top: 2%;
    align-items: center;
  }

  .transition-view /deep/ .vux-header {
    background-color: #ffffff !important;
  }

  .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before {
    border-color: #cccccc !important;
  }

  .transition-view .vux-header /deep/ .vux-header-title-area,
  .vux-header .vux-header-title {
    margin: auto;
    width: 100%
  }

  .transition-view /deep/ .weui-progress__bar {
    height: 25px;
  }

  div::-webkit-scrollbar {
    position: relative;
    top: 72px;
    width: 0px;
    height: 0px;
    background: rgba(221, 221, 221, 1);
    z-index: 1200;
  }

  div::-webkit-scrollbar-track {
    width: 0px;
    background: #FFFFFF;
    text-align: center;
  }

  div::-webkit-scrollbar-thumb {
    width: 0px;
    border-right: 6px solid #FFFFFF;
    background: rgba(221, 221, 221, 1);
    border-radius: 2px;
  }

  .fatherclass {
    margin-left: 5%;
    word-break: keep-all;
  }

  .modelList {
    padding: 16px 20px 16px 20px;
    margin: 10px 10px;
    background-color: #ffffff;
  }

  .box1 {
    height: 100px;
    position: relative;
    width: 1490px;
  }

  .box1-item {
    width: 200px;
    height: 100px;
    background-color: #ccc;
    display: inline-block;
    margin-left: 15px;
    float: left;
    text-align: center;
    line-height: 100px;
  }

</style>
